<script setup lang="ts">
import { computed } from 'vue'

const $props = defineProps({
  value: { type: String, default: '黑卡优惠价' },
  price: { type: [String, Number], default: '899' },
})

const priceArr = computed(() => {
  if (!$props.price) {
    return []
  }
  if ($props.price.toString().split('.').length === 2) {
    return $props.price.toString().split('.')
  }
  return Number($props.price).toFixed(2).toString().split('.')
})
</script>

<template>
  <text class="black-card">
    <text class="black-card--type">{{ value }}</text>
    <text class="black-card--price">{{ priceArr[0] }}.</text>
    <text class="black-card--decimal">{{ priceArr[1] }}</text>
  </text>
</template>

<style scoped lang="scss">
@include b(black-card) {
  @include flex;
  align-items: center;
  height: 58rpx;
  padding: 0 20rpx;
  line-height: 58rpx;
  border-radius: 32rpx;
  background-color: rgba(255, 237, 199, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 24rpx;
  @include m(price) {
    font-size: 30rpx;
    font-weight: 700;
    &::before {
      content: '￥';
    }
  }
  @include m(decimal) {
    font-weight: 700;
  }
}
</style>
